<template>
  <div class='container'>

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <!--  标题内容 -->
      <el-row>
        <el-col :span='16'>
          <el-input placeholder="请输入搜索内容"
                    v-model="keyWords"
                    class="input-with-select">
            <!-- @blur.native.enter="change" -->

            <el-button slot="append"
                       icon="el-icon-search"> </el-button>
            <!-- @click.native="change" -->

          </el-input>

        </el-col>

      </el-row>

      <el-table :data="allOrdersList"
                border
                stripe
                style="width: 100%">
        <el-table-column type="index">
        </el-table-column>

        "total": 1,
        "pagenum": "1",
        "goods": [
        {
        "order_id": 47,
        "user_id": 133,
        "order_number": "itcast-59e7502d7993d",
        "order_price": 322,
        "order_pay": "1",
        "is_send": "是",
        "trade_no": "",
        "order_fapiao_title": "个人",
        "order_fapiao_company": "",
        "order_fapiao_content": "办公用品",
        "consignee_addr": "a:7:{s:6:\"cgn_id\";i:1;s:7:\"user_id\";i:133;s:8:\"cgn_name\";s:9:\"王二柱\";s:11:\"cgn_address\";s:51:\"北京市海淀区苏州街长远天地大厦305室\";s:7:\"cgn_tel\";s:11:\"13566771298\";s:8:\"cgn_code\";s:6:\"306810\";s:11:\"delete_time\";N;}",
        "pay_status": "1",
        "create_time": 1508331565,
        "update_time": 1508331565
        }
        ]
        },

        <el-table-column label="订单编号"
                         width="250"
                         align='center'>
          <template slot-scope="scope">

            <span style="margin-left: 10px">{{ scope.row.order_number}}</span>
          </template>
        </el-table-column>

        <el-table-column label="订单价格"
                         width="160">
          <template slot-scope="scope">

            <span style="margin-left: 10px">{{ scope.row.order_price}}</span>
          </template>
        </el-table-column>

        <el-table-column label="是否付款"
                         width="120">
          <template slot-scope="scope">

            <el-button size="mini"
                       :type="scope.row.pay_status==1?'primary':'danger' ">{{scope.row.pay_status=='1'?'已付款':'未付款'}}</el-button>

          </template>
        </el-table-column>

        <el-table-column label="是否发货"
                         width="120">
          <template slot-scope="scope">

            <span style="margin-left: 10px">{{ scope.row.is_send}}</span>
          </template>
        </el-table-column>

        <el-table-column label="下单时间"
                         width="180">
          <template slot-scope="scope">

            <span style="margin-left: 10px">{{ scope.row.create_time|formateTime}}</span>

            <!-- <span style="margin-left: 10px">{{ scope.row.mg_state }}</span> -->
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">

            <el-tooltip class="item"
                        effect="dark"
                        content="修改地址"
                        placement="top-start">
              <el-button size="mini"
                         type="primary"
                         @click="handleEdit(scope.$index, scope.row)"> 修改地址</el-button>

            </el-tooltip>
            <el-button size="mini"
                       type="danger"
                       @click="handleFastMail(scope.$index, scope.row)">物流信息</el-button>

          </template>
        </el-table-column>

      </el-table>

    </el-card>

    <!--  弹框 -->
    <el-dialog title="收货地址"
               :visible.sync="dialogFormVisible">

      <el-form :model="form"
               ref="addUserForm">
        <el-form-item label="省市区"
                      prop="areas"
                      :label-width="formLabelWidth">

          <el-cascader v-model="form.areas"
                       :options="options"
                       @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址"
                      prop="detailAddress"
                      :label-width="formLabelWidth">
          <el-input v-model="form.detailAddress"
                    autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <!-- <el-button type="primary"
                   @click="addUsersBtnSure">确 定</el-button> -->

        <el-button type="primary"
                   @click="dialogFormVisible = true">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 物流信息 -->

    <el-dialog title="物流信息"
               :visible.sync="dialogFastMail">
      <!-- :reverse="reverse" -->
      <el-timeline>
        <el-timeline-item v-for="(activity, index) in fastMailData"
                          :key="index"
                          :icon="activity.icon"
                          :type="activity.type"
                          :color="activity.color"
                          :size="activity.size"
                          :timestamp="activity.ftime">
          {{activity.context}}
        </el-timeline-item>
      </el-timeline>

      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFastMail = false">取 消</el-button>
        <!-- <el-button type="primary"
                   @click="addUsersBtnSure">确 定</el-button> -->

        <el-button type="primary"
                   @click="dialogFastMail = true">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>



// import Vue from 'vue'
// import moment from 'moment'

// Vue.filter('formateTime', function (val) {

//   return moment(val).format('YYYY-MM-DD HH:mm:ss')
// })



import { getAllOrders, getFastMail } from '../../api/index'
import chinaData from './citydata'

import { fastMailData } from './fastMailData'

let that;

export default {
  name: '',
  data () {
    return {
      keyWords: '',
      allOrdersList: [],
      pagenum: 1,  // 当前页码
      total: 0,
      // currentPage4: 4,  //当前页数
      pageSize: 10,// 每页显示的条数
      dialogFormVisible: false,
      form: {
        areas: '',
        detailAddress: ''
      },
      formLabelWidth: '120',

      options: chinaData,
      fastMailData: fastMailData,
      dialogFastMail: false


    }
  },
  methods: {
    async initGetOrders (keyWords = '') {
      this.keyWords = keyWords
      let { data, meta } = await getAllOrders({ query: this.keyWords, pagenum: this.pagenum, pagesize: this.pageSize })
      if (meta.status != 200) return this.$message.info({ text: meta.msg })
      // console.log(data);
      this.allOrdersList = data.goods
      this.total = data.total
      this.pagenum = data.pagenum
    },

    handleEdit (index, row) {
      this.dialogFormVisible = true
    },
    //获取三级联动的值
    handleChange (value) {
      console.log(value);
    },

    //物流信息查询
    handleFastMail (index, row) {
      // row  能够获取到该商品的id  
      //   getFastMail({ id: 1106975712662 }).then(res => {
      //     console.log(res);
      //   })

      this.dialogFastMail = true

      this.getRandomColor()




    },

    Color () {
      this.r = Math.floor(Math.random() * 255);
      this.g = Math.floor(Math.random() * 255);
      this.b = Math.floor(Math.random() * 255);
      return 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',0.8)';
    },


    getRandomColor () {

      return fastMailData.filter(item => item['color'] = this.Color())
    }

  },
  mounted () {

    that = this;

    this.initGetOrders()
  },
  filters: {

    formateTime: (val) => {
      //   console.log(that);
      return that.$moment(val).format('YYYY-MM-DD HH:mm:ss')

    }
  }

}
</script>

<style scoped lang='less'>
.el-table {
  margin-top: 20px;
}
</style>